<template>
  <!-- 故障类型统计 -->
  <div class="page-container">
    <div class="control-container">
      <div class="left-panel shrink-panel" :class="isWide?'':'narrow'">
        <div class="shrink-btn-panel">
          <i :class="isWide?'el-icon-arrow-left':'el-icon-arrow-right'" @click="isWide = !isWide" />
        </div>
        <OutletTree
          v-if="isWide"
          @handleNodeClick="handleNodeClick"
        />
      </div>
      <div class="right-panel">
        <!-- <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form>
        </div> -->

        <div class="table-panel">
          <el-table
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 300px)"
            :data="tableData"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column prop="departmentName" label="项目部名称" width="100" />
            <el-table-column prop="outletName" label="排放口名称" />
            <el-table-column prop="equipmentType" label="设备" />
            <el-table-column prop="faultType" label="故障类型" />
            <el-table-column prop="count" label="次数" />
          </el-table>
          <div class="pagination-container">
            <Pagination
              v-show="query.total>0"
              :total="query.total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="handleSelect"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import OutletTree from '@/components/Tree/outletTree'
import { countSatisfactionByFaultType } from '@/api/base/statistics'
import { getDictLabel } from '@/utils'
export default {
  name: 'FaultType',
  components: {
    Pagination, OutletTree
  },
  data() {
    return {
      isWide: true,
      query: {
        date: '',
        total: 0,
        page: 1,
        limit: 20,
        projectDepartmentId: null,
        enterpriseId: null,
        outletId: null
      },
      tableLoading: false,
      tableData: [],
      spanArr: [],
      position: 0,
      name: ''
    }
  },
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    getDictLabel,
    initData() {
      this.cleanQuery()
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      countSatisfactionByFaultType(query).then(res => {
        this.tableData = res.data.list
        this.tableData.forEach((item) => {
          if (item.equipmentType.indexOf('COD') !== -1) {
            item.faultType = getDictLabel('e063', item.faultType)
          } else if (item.equipmentType.indexOf('氨氮') !== -1) {
            item.faultType = getDictLabel('e064', item.faultType)
          } else if (item.equipmentType.indexOf('总磷') !== -1) {
            item.faultType = getDictLabel('e065', item.faultType)
          } else if (item.equipmentType.indexOf('总氮') !== -1) {
            item.faultType = getDictLabel('e066', item.faultType)
          } else if (item.equipmentType.indexOf('烟气') !== -1) {
            item.faultType = getDictLabel('e067', item.faultType)
          } else {
            console.log(item.equipmentType)
          }
        })
        this.rowspan()
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 导出  未完成
    handleExport() {
      this.exportLoading = true
      // this.tableHead
      // this.tableData

      import('@/utils/Export2Excel').then(excel => {
        const header = ['项目名称', '排放口名称', '运维设备名称', '服务类型', '设备型号', '设备编号', '数量/（台）'] // 最后一行的表头数据
        const filterVal = ['name', 'outletName', 'shortName', 'serverType', 'eqmModel', 'equipmentNumber', 'contacts']
        // 这里要注意 header  和 filterVal 的数组长度一定要相等，否则会报错
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        const styleRows = [1]
        const merges = [] // 合并单元格的数据，如何合并参考上面图片讲解
        for (var i = 0; i < list.length; i = j) {
          for (var j = i + 1; j < list.length; j++) {
            if (list[i].name !== list[j].name) {
              merges.push('A' + (i + 2) + ':' + 'A' + (j + 1))
              break
            } else if (j === list.length - 1) {
              merges.push('A' + (i + 2) + ':' + 'A' + (j + 2))
            }
          }
        }
        const styleColumns = [1]
        excel.export_json_to_excel({
          header,
          data,
          merges,
          styleRows,
          styleColumns,
          filename: this.name + '_设备运行情况统计'
        })
      })
      this.exportLoading = false
    },
    // 表格数据调整
    rowspan() {
      this.spanArr = []
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
          if (this.tableData[index].departmentName === this.tableData[index - 1].departmentName) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        return {
          rowspan: _row,
          colspan: 1
        }
      }
    },
    // 点击树
    handleNodeClick(data) {
      this.query.projectDepartmentId = null
      this.query.enterpriseId = null
      this.query.outletId = null
      this.name = data.name
      if (data.level === 1) {
        this.query.projectDepartmentId = data.id
      } else if (data.level === 2) {
        this.query.enterpriseId = data.id
      } else if (data.level === 3) {
        this.query.outletId = data.id
      }
      this.handleSelect()
    },
    cleanQuery() {
      this.query = {
        total: 0,
        page: 1,
        limit: 20,
        projectDepartmentId: null,
        enterpriseId: null,
        outletId: null
      }
    },
    // 拼接数据
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

  }
}
</script>

<style lang='scss' scoped>
</style>
